<template>
	<view class="orderInfo" v-if="orderInfo">
		<view class="orderId">
			<view class="title">

				<view class="ref">
					<text class="line"></text>
					<text>订单编号：{{orderInfo.orderNo}}</text>
				</view>
				<text class="cancle" v-if="orderInfo.orderStatus==1" @click="toggle('bottom')">取消订单</text>
				<!-- <text class="cancle" v-if="orderInfo.orderStatus==1">待派单</text> -->
				<text class="cancle" v-if="orderInfo.orderStatus==2">已派单</text>
				<text class="cancle" v-if="orderInfo.orderStatus==8">已完成</text>
				<text class="cancle" v-if="orderInfo.orderStatus==8">已评价</text>
				<text class="cancle" v-if="orderInfo.orderStatus==7">已取消</text>
			</view>
			<view class="name">
				<text class="uText">姓名：</text>
				<text>{{orderInfo.mobile}}</text>
			</view>
			<view>
				<text class="uText">手机号码：</text>
				<text>{{orderInfo.realname}}</text>
			</view>
			<view>
				<text class="uText">服务项目：</text>
				<text>{{orderInfo.productCatList[0].title}}</text>
			</view>
			<view>
				<text class="uText">服务地址：</text>
				<text>{{orderInfo.address}}</text>
			</view>
			<view>
				<text class="uText">订单价格：</text>
				<text>{{orderInfo.productCatList[0].totalPrice}}</text>
			</view>
			<view>
				<text class="uText">服务时间：</text>
				<text>{{orderInfo.startTime}}-{{orderInfo.endTime}}</text>
			</view>
			<!-- <view>
				<text class="uText">下单时间：</text>
				<text>2023-11-12 23：11：45</text>
			</view> -->
			<view>
				<text class="uText">订单备注：</text>
				<text>无</text>
			</view>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content">
					<text class="title">
						<text class="subTitle">取消订单</text>

						<text class="close" @click="close">X</text>
					</text>
					<view class="tips">
						<text>温馨提示：</text>
						<text>订单一旦取消，无法恢复</text>
					</view>
					<view class="reason">
						<text style="height:50rpx;line-height:50rpx">请选择取消订单的原因(必选)</text>
						<view class="uni-px-5 uni-pb-5">
							<uni-data-checkbox v-model="radio" :localdata="reasonType" @change="changeRadio"></uni-data-checkbox>
						</view>

					</view>
					<view class="submitBtn" @click="sureCancel" :class="isSubmit?'background':'unbackground'">
						提交
					</view>
				</view>


			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	const {
		proxy
	} = getCurrentInstance()
	import {
		onMounted,
		ref
	} from 'vue'
	const popup = ref()
	const type = ref('')
	const radio = ref(-1)
	const orderInfo = ref()
	const isSubmit=ref(false)
	const reasonType = ref([{
		text: '地址信息填写错误',
		value: 0
	}, {
		text: '不想要了',
		value: 1
	}, {
		text: '服务错选/多选',
		value: 2
	}, {
		text: '服务无货',
		value: 3
	}, ])
	const toggle = (e) => {
		console.log(e)
		type.value = e
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		popup.value.open(type.value)
	}
	const close = () => {
		popup.value.close()
	}
	const change = (e) => {
		console.log(e)
		radio.value=-1
		isSubmit.value =false
		
	}
	const storeInfo = (orderNo) => {
		proxy.sjuRequest.request("/api/weChatMall/order/getOrdersByOrderNo/" + orderNo + '/' + proxy.sjuLogin.getValue(
			"miaoMaGJOpenid"), 'post').then(res => {
			console.log(res)
			orderInfo.value = res.data
			console.log(orderInfo.value)

		})
	}
	const changeRadio=(e)=>{
		console.log(e)
		isSubmit.value =true
		console.log(isSubmit.value)
	}
	const sureCancel =()=>{
		
		if(isSubmit.value){
			proxy.sjuAlert.showLoading()
			proxy.sjuRequest.request("/api/channelpay/wxpay/refund", 'post',{
					"fundChannelCode":"WXPAY10103",
					"instOrderNo": orderInfo.value.instOrderNo,
					"amount": {"amount":orderInfo.value.productAmountTotal} 
				}).then(res => {
					
				if(res.data.apiResultCode==="SUCCESS"){
					proxy.sjuAlert.showAndRedirect('订单取消成功,订单金额按原支付渠道退回（预计24小时内到账）', '提示', () => {
						
						proxy.sjuNav.navigateBack()
					})
					 proxy.sjuAlert.hideLoading()
				}else{
					proxy.sjuAlert.showError('订单取消失败，请稍后再试', '提示')
					 proxy.sjuAlert.hideLoading()
				}
			
			})
		}
	}
	onLoad((options) => {
		console.log(options.orderNo)
		console.log(isSubmit.value)
		storeInfo(options.orderNo)
	})
</script>

<style lang="scss" scoped>
	.orderInfo {
		width: 100%;
		height: 100%;
		background: #EBEBEB;
		padding: 20rpx;
		box-sizing: border-box;

		.orderId {
			width: 100%;
			height: auto;
			// height:200px;
			padding: 20rpx;
			border-radius: 3px;
			background: #fff;
			box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
			box-sizing: border-box;

			>uni-view {
				// height:60rpx;
				line-height: 60rpx;
				display: flex;
				flex-wrap: nowrap;

				// justify-content: space-between;
				// border-bottom: 1px solid #EBEBEB;
				.uText {
					// align-self: auto;
					width: 80px;
					// flex-grow:1
					//  flex:1 1 0%;
				}
			}

			.title {
				// height: 80rpx;
				// line-height: 80rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				border-bottom: 1px solid #EBEBEB;
				padding-bottom: 15rpx;

				.ref {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-items: center;

					.line {
						// display: block;
						width: 3px;
						height: 20px;
						background: #F33A45;
						margin-right: 20rpx;
					}

				}

				.cancle {
					padding: 0 20rpx;
					border: 1px solid #FEF2F4;
					background: #FEF2F4;
					color: #F33A45;
					box-sizing: border-box;
					border-radius: 20px;
				}
			}

		}

		.popup-content {
			width: 100%;
			height: 700rpx;
			padding: 30rpx;
			// border-radius: ;
			border-left-top-radius: 10px;
			box-sizing: border-box;

			.title {
				display: flex;
				// text-align: center;
				align-items: center;
				justify-content: center;
				// flex-direction: row;
				// justify-content:center;
				height: 30px;
				line-height: 30px;
				color: #323232;
				font-size: 30rpx;
				margin-bottom: 15rpx;
				font-weight: bold;
				position: relative;

				.subTitle {
					// display: flex;
					// justify-content:center;
				}

				.close {
					font-size: 40rpx;
					color: #989898;
					position: absolute;
					top: -2px;
					right: 0
				}

				text {
					// display: flex;
					// flex-direction: row-reverse;
				}
			}

			.tips {
				display: flex;
				flex-direction: column;
				background: #F6F6F6;
				padding: 30rpx;
				box-sizing: border-box;
				color: #494949;

				text {
					line-height: 1.8;
				}


			}

			.reason {
				margin-top: 20rpx;

				::v-deep .checklist-group {
					display: flex;
					flex-direction: column !important
				}

				::v-deep .uni-data-checklist {
					display: flex;
					flex-direction: column !important
				}
			}

			.submitBtn {
				width: 90%;
				margin: 0 auto;
				margin-top: 40rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 35rpx;
				border-radius: 20px;
				background: #EAEAEA;
				color: #A4A4A4;
				text-align: center;
			}
			.background{
				background:#FEF2F4;
				color: #F33A45;
			}
			.unbackground{
				background: #EAEAEA;
				color: #A4A4A4;
			}


		}
	}
</style>